Lecture 9 



Interactive computer graphics 
nus, interactive modeling, animation 
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Menus 



• Using mouse interaction and graphics primitives we can 
build our graphics input devices (widgets) 

• Each specific window system provide a toolkit that 
contains ready to use input devices 

• The cross-platform GLUT window system has some input 
devices (Widgets). Pop-up menu is one of them 

• To use a pop-up menu in GLUT 

- We must define an action to each menu entry 

- We must link the menu to a particular mouse button 

- We must register a callback function for each menu 
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Menu example 



• In a program that draw squares on the screen when 
the user click the left mouse bottom (the cursor must 
be on the graphics window) 

• Menu entries 

- The first is to exit the program 

- The second is to make the drawn square larger 

- The third is to make the drawn square smaller 

• The menu callback function name is demo menu 
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Pop-up menu demo 



/* globals */ 
GLsizei wh = 5&&, ww 
GLfloat size = 3.0- 



= 5&Ej /* initial window size */ 
/* half side length of square */ 



void myMouse(int btnj int state, int Xj int y) 

{ 

i f ( bt n ==GLLTT_LE FT_B LHTON && state==GLLrr_[»WN) drawSquare(K,y) ; 

if ( btn ==GLUT_RIGHT_B UTTON && state==GLJTJ>OWN ) exit (€>) j// the menu gain 

} 

vcid display( ) 

{ 



int main (int argCj char **argv) 

{ 

glutlnit(&argc, argv); 

glut InitDispl ayfta d e (GLJT_SI NGLE | GLAJTRG B ) ; 
glutInitWindow5ize(5&&, 5&&); 
glutCreateWindow( "r.ouse event" ) ; 
glutReshapeFunc(myReshape) ; 
glutMouseFunc(myMouse) ; 
glutCreateMenu(demo_menu) ; 
glutAddMenuEntry ("quit " 1) ; 

glutAddHenuEntry(" increase square size"., 2); 
glutAddMenuEntry ("deer ease square size"j 3); 
glutAttachMenu (GLUT_RIGHT_BUTTONI) j| 
glutDisplayFunc( display) ; 
myinit ( ) ; 
glutMainl_oop( ) ; 

} 



Ivoid myReshape (GLsizei h, GLsizei h) 

{ 

/* adjust clipping box */ 
glHatrixMode (GLPROJEtTION ) ; 
gll_oadIdentity( ); 

glOrtho(0.0, (GLdouble)w, G.G, (GLdoubleJh., -1.0, l.G); 

gLlat rixMod e (GLMODE LVIEW) ; 

gll_oadIdentity( ) ; 

/* adjust viewport and clear */ 

glViewport ( h ) ; 

glClearColor (1.0, 1.0, 1.0, 1.0); 

glC le a r (GLCOLORB U F F E R_B IT ) ; 

glFlush(); 

/* set global size for use by drawing routine */ 



wh = h; 



:■ 



vcid de[rio_menu(int id) 

{ 

switch (id) 
{ 

case 1: exit(&); 
break; 

case 2: size =2 * size; 
break; 

case 3: if (size >1) size = size/2; 
break; 

} 

glutPostRedisplay( );// invoke display function to redraw without the menu 

} 



vcid draiv5quare(int x t int y) 

{ 

y=wh-y;/7 convert from window coordinates to world coordinates 
// choose a random color 

glColor3ub( (char) rand()%2.56, (char) rand()%256_, (char) rand()%256); 

glBegin ( GL_POLYGON ) ; 

glVertex2f (x-l-size ± y-l-size); 

glVertex2f (x-size, yfsize); 

glVertex2f (x-size ± y-size); 

glVertex2f (x-l-size, y-size); 

glEnd(); 

glFlush(); 

} 
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Picking 



• The application program puts primitives in the GL pipelines to 
be processed and finally reach the frame buffer ad rasterized 
pixels 

• We specify objects using primitives (for example, a sphere is 
approximated using a set of triangles at the poles and a set of 
quads in between the two poles 

• Picking is the process of identifying a primitive or an object in 
your model by interacting with the contents of the graphics 
window on the screen (for example click to identify a sphere 
on the screen that contains many other, may be overlapping, 
objects 

• OpenGL supports picking but requires some programming 
intervention (the details in sections 3.8,3.9,3.10 are optional) 
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Picking and interactive modeling 

• In a graphic application that supports interactive 
modeling, the user, not the programmer, specify his 
model. 

- The user of the AutoCAD (civil or architect engineer) specifies 
the model (building) 

• In an interactive modeling application 

- The user can add or remove parts of the model (walls, windows, 
doors, for examples) 

- The user can pick an object to delete, modify, move, etc. 

- The user can save/reload his model 

- The model must be maintained in a data structures to support 
interactive modeling 
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Animation: The rotating square 



Consider the following two-dimensional point: 
x = cos(0) , 
y = sin(0). 

This point lies on a unit circle regardless of the value 
of 6. The three points 
(- sin (6), cos (6)), 
(- cos (6), - sin (6)), 
(sin (6), - cos (6)) 

also lie on the unit circle. These four points are 
equidistant along the circumference of the circle 



We can program an animating square by defining a global variable for (6), 
The display function that displays a square defined by the above for points, 
and the idle callback function that increase (6) by an increment each time 
invoked 




Unit circle 
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Rotating square 



float theta=39, thetar; 



vcid ivait(int timeout) 

{ 

timeout += clock(); 
while(clock( ) < timeout) 
continue; 



vcid idle() 

{ 

theta-H=lj /* or some other amount */ 
ifftheta >= 360.0} theta -=369 . 9; 

wait (199);// control by the value according to system speed 
glut Post Redisplay( ); 

vcid mouse(int buttonj int state, int Xj int y) 
{ 

if ( button ==GLUT_LEFT_BLJTTON state ==GLUT_DOWN ) 

glutldleFunc(idle); 

i f ( b u 1 1 o n = =GLIJT_MI DDLE_B UTTON state=^SL | UT_DOWN ) 

glutldleFunc(NULL); 

} 



vcid display() 
{ 

glClear(GL_COLOR_BUFFER_BIT); 

glBegin ( G L_POLYGON ) ; 

/* convert degrees to radians */ 

thetar =theta/(3 . 14159/159. 9) ; 

glVertex2f (cos (the tar) ± sin(thetar)); 

glVertex2f ( -sin (thetar) j cos (thetar) ) ; 

glVertex2f ( -cos(thetar),-sin(thetar)); 

glVertex2f ( sin (thetar ) ± -cos( thetar) ) ;| 

glEndf); 

glFlush()j 

} 



vcid myinit() 
{ 

glWat ri xMo d e ( G L_P ROl E C TION ) ; 
gl_cadldentity( ) ; 
gluOrtho2D(-2.0, 2.9, -2.9, 2.9); 
glWat rixMod e (GLMODE LVI EW ) j 
glCleartolor (1-9., 1-9^ 1.9, 1-9) j 
glColor3f (9-9j9-9j9-9) j 

} 



int mainfint argCj char **argv) 
{ 

glutlnitf&argc, argv); 

glutInitDisplayMode(GLLJT_SIMGLE | GLUT_RG B ) ; 
glutInitWindowSize(599, 599); 
glutCreateWindoiv( "Rotating square") j 
glutDisplayFunc( display) ;| 
myinit(); 

glutMouseFunc ( mouse ) ; 
glutldleFunc(idle); 
glutMainLoopf ) j 

} 
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Animation and flickering/artifacts 



• As long as the contents of the frame buffer are unchanged and we 
refresh at the 60- to 85-Hz rate, we should not notice the refresh 

• When drawing a simple image that takes less than one refresh cycle 
timer (the drawing starts and ends in the same cycle) the image 
should be smooth 

• When drawing a complex image that takes longer than one refresh 
cycle time, we se different parts each refresh cycle. Hence, artifacts 
may occur 

• When clearing and redrawing a simple object (square for example) 
there is no coupling between when new squares are drawn into the 
frame buffer and when the frame buffer is redisplayed by the 
hardware. Thus, depending on exactly when the frame buffer is 
displayed, only part of the square may be in this buffer. Hence, 
flickers and artifacts may appear 
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Reducing flickering and 
artifacts using double 
buffering 



The objective is to display a scene 
only after finishing drawing it 



void display() 

{ 

glC 1 e a r (GL_COLOR_B U F F E R_B IT ) j 

glBegin (GL_POLYGON ) ; 

/* convert degrees to radians */ 

thetar =theta/(3 . 14159/1S&. &); 

glVertex2f (cos( the tar) ± sin(thetar)); 

glVertex2f ( -sin(thetar), cos(thetar)); 

glVertex2f ( -cos(thetar),-sin(thetar)); 

glVertex2f( sin (thetar) ,-cos(thetar)); 

glEnd(>i 

glFlu S h(); 

if (doubleBuff ering)glutSivapBuf f ers( ) ; 

> 



The drawing is done always in the back buffer 
when double buffering is used. Just swap 
buffers when finishing drawing 



int mainfint argCj char **argv) 

{ 

glutlnit(&argc, argv); 

if {! doubleBuff ering) glut I nit Display^ de(GLUT_SIWSLE | GLUT_RGB) ; 

else glutInitDisplayMode(6LUT_D0UBLE | GLUT_RGB ) ; 

glutInitWindowSize(5&9 ± 5&&); 

glutCreateWindoiv( "Rotating square") j 

glutDisplayFunc( display) ; 

nyinitQ; 

glutMouseFunc( mouse) ; 
glutldleFunc(idle); 
glutMainl_oop( ) ; 



Activate double buffering 
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Controlling the time of 
drawing/red rawing cycle 
in animation using timer 

int n ■ 60; /• desired frame rate ♦/ 
glutTinerFuncdOO, nyTim«r, n) ; 

In main function: Delay the main loop 100 milliseconds 
then call the my timer function 



void myTimer(int v) 




i 




glutPostRedi splay) ; 
glutTimeiFuncUOOO/Q, my 


Timr, v); 


> 





The callback: Recall the timer 
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Features of a good interactive program 

• A smooth display, showing neither flicker nor any 
artifacts of the refresh process 

• A variety of interactive devices on the display 

• A variety of methods for entering and displaying 
information 

• An easy-to-use interface that does not require substantial 
effort to learn 

• Feedback t o the user 

• Tolerance for user errors 

• A design that incorporates consideration of both the 
visual and motor properties of the human 



Warning: this is a draft copy. It has not been passed any revision 



Interactivity and the need 
to work directly in the 
frame buffer 



Displaying a popup menu requires drawing the 
menu on the screen, then restoring the screen 
contents it its place after it has been disappeared 

it , 

In such cases we need to manipulate the / 
contents of the fame buffer directly. 
There is need to go through the 
pipelines. Two approaches to go: 

• Bit-block-transfer(advanced ch.8) 

• Logic operations (simple) 
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Rubber-banding: drawing a line 
segment by clicking to define the 
stating point then drag to locate the 
end points. During the rubber-banding 
we need to draw the line, remove it 
and restore the screen contents, 
redraw the line and son 
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Logic operations 



• Writing in the frame buffer( the new pixel vale is called the 
source and the old pixel value is called the destination value) 

• There are other 16 way for getting the new destination value 
from the source and the current destination values (only two 
will be discussed now) 

- Copy/replacement mode (default/normal rendering): New pixel values 
replaces the old values (source pixel replaces the destination pixel) 

- XOR: Source bits are XORed with current destination bits to get the 
new bits 

• Important property: (d XOR s) XOR s=d: Draw the object then erasing 
it and restoring it place by just redrawing it ( a simple solution for 
rubber-banding and menu problem) 
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